<template>
	<view class="content">
		<view class="nav">
			<uni-nav-bar title="投诉中心" backgroundColor="transparent" left-icon="left" @clickLeft="goBack" right-width="200rpx" left-width="200rpx">
				<block slot="right">
					<text @click="toOrder">发起投诉</text>
				</block>
			</uni-nav-bar>
		</view>
		
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="name">
					<view class="logo">
						<image :src="item.service.category_image"></image>
						<text>{{item.service.title}}</text>
					</view>
					<view class="status">
						<text style="color: #6D6F6F;" v-if='item.sales_status == 2'>已处理</text>
						<text style="color: #DA0622;" v-else>待处理</text>
					</view>
				</view>
				
				<view class="product">
					<image :src="item.service.image" mode="aspectFill"></image>
					<view class="detail">
						<view class="title">{{item.service.category_name}}</view>
						<view class="text">{{item.sales_create_time}}</view>
						<view class="text">总价:￥{{item.pay_amount}}</view>
					</view>
				</view>
			
				<view class="reason">
					<view class="title">投诉原因</view>
					<view class="rich">{{item.sales_content}}</view>
					<text class="fangan" v-show="item.sales_status == 2">解决方案：{{item.return_content}}</text>
				</view>
				
				<!-- <view class="tag" @click="showMore(item)">
					{{item == show_index ? '收起' : '展开'}}
				</view> -->
			</view>
			<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" text="暂无记录" :width="161" :height="129" v-show="list.length == 0"></blankPage>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				
				show_index:0,
				
				page:1,
			}
		},
		methods: {
			showMore(e){
				this.show_index = this.show_index == e ? 0 : e
			},
			toOrder(){
				uni.navigateTo({
					url:'/otherpages/order/order?type=0'
				})
			},
			goBack(){
				uni.navigateBack()
			},
			getList(){
				this.request.httpTokenRequest({
					url: "order/getSfterSales",
					method: "get"
				}, {page:this.page}).then(res => {
					if (res.code == 0) {
						res.data.data.forEach(item=>{
							this.list.push(item)
						})
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})	
			},
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.page ++ 
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: calc(var(--status-bar-height) + 44px) 30rpx 30rpx;
		box-sizing: border-box;
	}
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #F5F7F8;
		z-index: 99;
		padding-top: var(--status-bar-height);
		text {
			font-size: 29rpx;
			color: #EF6A43;
			line-height: 41rpx;
		}
	}
	
	.list {
		// padding-top: 30rpx;
	}
	
	.item {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx 25rpx 70rpx 30rpx;
		position: relative;
		margin-bottom: 60rpx;
		.name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.logo {
				display: flex;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
				text {
					font-size: 30rpx;
					color: #08090A;
					line-height: 42rpx;
				}
			}
			.status {
				font-size: 26rpx;
				line-height: 37rpx;
			}
		}
				
		.product {
			display: flex;
			margin: 30rpx 0 0;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E9E9E9;
			image {
				width: 142rpx;
				height: 190rpx;
				margin-right: 23rpx;
			}
			.detail {
				flex: 1;
				.title {
					font-size: 28rpx;
					color: #656667;
					line-height: 40rpx;
				}
				.text {
					font-size: 24rpx;
					color: #656667;
					line-height: 33rpx;
					margin-top: 10rpx;
				}
			}
		}
	
		.reason {
			margin-top: 10rpx;
			.title {
				font-size: 28rpx;
				color: #08090A;
				line-height: 40rpx;
			}
			.rich {
				min-height: 147rpx;
				background: #F7F7F7;
				border-radius: 10rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin: 11rpx 0 28rpx;
				font-size: 24rpx;
			}
			text {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #08090A;
				line-height: 42rpx;
			}
		}
	
		.tag {
			width: 240rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 35rpx;
			border: 1rpx solid #D1D1D1;
			font-size: 26rpx;
			color: #333333;
			line-height: 60rpx;
			text-align: center;
			position: absolute;
			bottom: -30rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	
	}
	
</style>
